<template>
  <div class="login">

    <!-- <el-button class="btn" type="primary" @click="pop_box">登录弹框</el-button> -->
    <!-- 弹出模态框 -->
    <div v-show="boxShow" class="div-container" id="div-container">
      <div class="div-child-container">
        <div class="div-child">
          <h1>登录</h1>
          <el-input class="btn1" placeholder="请输入学号/工号" v-model="identity_id" clearable></el-input>
          <el-input class="btn1" placeholder="请输入密码" v-model="password" clearable></el-input>
          <div style="margin-top:20px;">
            <el-button type="primary" @click="confrim">登录</el-button>
            <el-button type="primary" @click="cancle">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import HelloWorld from "../components/HelloWorld";
export default {
  name: "login",
  data() {
    return {
      boxShow: true,
      identity_id: "",
      password: "",
      token:""
    };
  },
  mounted() {},
  methods: {
    // pop_box() {
    //   this.boxShow = true;
    // },
    cancle() {
      this.boxShow = false;
    },
    confrim() {
        const _this=this
        var qs= require('qs');
        axios({
             method:"post",
            url:"http://39.99.160.25:8088/users/web/login",
             data:qs.stringify({identity_id:this.identity_id,password:this.password}),
            // data:{size:5,page:1,sort:"id",asc:"asc"},
            headers:
            {
              
            }
            
        }).then(function (resp){
            console.log(resp)
            sessionStorage.setItem("token",resp.data.data.token)
            sessionStorage.setItem("username",resp.data.data.username)
            sessionStorage.setItem("head_portrait",resp.data.data.head_portrait)
            sessionStorage.setItem("id",resp.data.data.id)
            sessionStorage.setItem("identity_id",resp.data.data.identity_id)
            if(resp.data.data.identity_id==_this.identity_id){
              _this.$alert('《'+_this.identity_id+'》登录成功！', '消息',{
                confirmButtonText: '确定',
                 callback: action =>{
                    _this.$router.push({
                        path:'/users'
                    })
                 }
              })
          }
           
        })
       
        
     /*  var data = {
        identity_id: this.identity_id,
        password: this.password
      };
      this.$post("http://39.99.160.25:8088/users/web/login", data).then(res => {
        if (res.code == 0) {
          this.$router.push({ name: "users", params: res.data });
        } else {
          alert("账号或密码错误");
        }
      }); */
    }
  },
  
//   components: {
//     HelloWorld
//   }
};
</script>
<style scoped>
/* .btn {
  margin-top: 300px;
} */
.btn1 {
  margin: 0 auto;
  margin-top: 30px;
  width: 60%;
}
#box {
  width: 80px;
  height: 40px;
  background: #fd7430;
  border: none;
  border-radius: 5px;
  outline: none;
  color: #fff;
}

.div-container {
  position: fixed;
  top: 0%;
  width: 100%;
  height: 100%;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5) !important;
  background: #000;
  filter: Alpha(opacity=60);
}

.div-child-container {
  position: relative;
  width: 400px;
  height: 200px;
  margin: auto;
  top: 28%;
  background: #fff;
  z-index: 250;
}

.div-child {
  width: 500px;
  height: 400px;
  margin: auto;
  background: #fff;
  z-index: 300;
  text-align: center;
}

.div-child span {
  position: relative;
  top: 40px;
}

.div-child .my-btn {
  margin-top: 80px;
}
.div-child .my-btn button {
  width: 80px;
  height: 40px;
  background: #fd7430;
  border: none;
  border-radius: 5px;
  color: #fff;
  outline: none;
}

.div-child .my-btn button:first-child() {
  margin-right: 20px;
}
</style>